<!-- 搜索栏 -->
<form nz-form [formGroup]="searchForm" class="ant-advanced-search-form">
    <div nz-row [nzGutter]="24" style="white-space: nowrap">
        <div nz-col [nzSpan]="6">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="groupName">组名</nz-form-label>
                <nz-form-control class="search-form-control">
                    <input class="default-input" nz-input formControlName="groupName" placeholder="输入组名"/>
                    <div *ngIf="submitted && fm['groupName'].invalid">
                        <div *ngIf="fm['groupName'].errors?.['maxlength']">组名长度不超过20</div>
                    </div>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="6">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="groupTypeId">组类型</nz-form-label>
                <nz-form-control class="search-form-control">
                    <nz-select name="groupTypeId" formControlName="groupTypeId" [nzAllowClear]="true">
                        <nz-option *ngFor="let groupType of groupTypes" [nzValue]="groupType.id" [nzLabel]="groupType.name"></nz-option>
                    </nz-select>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="12">
            <div nz-row>
                <nz-col class="search-button-col">
                    <app-search-button [search]="true" (searchEvent)="onSearch()" [reset]="true"
                        (resetEvent)="onReset()" [create]="true"
                        (createEvent)="onCreate(groupTitle, groupContent)"></app-search-button>
                </nz-col>
            </div>
        </div>
    </div>
</form>

<!-- Table -->
<div nz-row style="margin-top: 4px; white-space: nowrap;">
    <nz-table #expandTable nzShowPagination [nzData]="groups" nzTableLayout="fixed" [nzFrontPagination]="false"
        [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total" (nzQueryParams)="onPageParamChange($event)">
        <thead>
            <tr>
                <th>组ID</th>
                <th>组名称</th>
                <th>组类型</th>
                <th>组编号</th>
                <th>描述</th>
                <th>创建人</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let group of groups">
                <td>{{group.groupId}}</td>
                <td>{{group.groupName}}</td>
                <td>{{group.groupType}}</td>
                <td>{{group.groupCode}}</td>
                <td>{{group.remark}}</td>
                <td>{{group.createBy}}</td>
                <td [nzEllipsis]="true" style="overflow: hidden;" nzRight>
                    <button nz-button class="action-button normal-button" (click)="onDetail(detailTitle, detailContent, group)">详情</button>
                    <button nz-button class="action-button normal-button" (click)="onUpdate(group, groupTitle, groupContent)">编辑</button>
                    <button nz-button class="action-button delete-button" (click)="handleDelete(group.groupId)">删除</button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>

<!-- 新建,编辑对话框 -->
<nz-modal class="edit-modal">
    <ng-template #groupTitle>
        {{editTitle}}
        @if (groupName != null) {
            <span style="color: rgb(55, 134, 90);">{{groupName}}</span>
        }
    </ng-template>

    <ng-template #groupContent>
        <app-add-group [modeSubject]="modeSubject" (addGroupEvent)="onAddGroupEvent($event)"></app-add-group>
    </ng-template>
</nz-modal>

<!-- 详情对话框 -->
<nz-modal class="edit-modal">
    <ng-template #detailTitle>组详情:<span style="color: rgb(55, 134, 90);">{{groupName}}</span></ng-template>

    <ng-template #detailContent>
        <app-group-detail (detailEvent)="onDetailEvent($event)" [groupSubject]="groupSubject"></app-group-detail>
    </ng-template>
</nz-modal>